<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.roleName" placeholder="输入角色名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--批量删除按钮-->
    <el-button size="small" type="warning" icon="el-icon-delete-solid" @click="dataDel(multipleSelection)" style="margin-bottom: 10px">全部删除</el-button>
    <!--列表-->

    <!--    {-->
    <!--    managerAccountNumber:'manager001',-->
    <!--    managerName:'池松松',-->
    <!--    roleName:'超级管理员',-->
    <!--    managerGender:'1',-->
    <!--    insertTime:'2022-5-20 15:21',-->
    <!--    modifiedTime:'2022-5-20 15:21',-->
    <!--    }-->

    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中"   @selection-change="handleSelectionChange" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column type="index" sortable  label="序号" width="200" :index='indexMethod'>
      </el-table-column>
      <el-table-column sortable prop="roleNumber" label="角色编码" width="150">
      </el-table-column>
      <el-table-column sortable prop="roleName" label="角色名称" width="150">
      </el-table-column>
      <el-table-column sortable prop="insertTime" label="添加时间" width="220">
      </el-table-column>
      <el-table-column sortable prop="modifiedTime" label="修改时间" width="220">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <!--<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
          <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">授权</el-button>
          <!--/*scope.$index,*/-->
          <el-button size="mini" type="danger" @click="dataDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:childMsg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="角色名称" prop="managerAccountNumber">
          <el-input size="small" v-model="editForm.roleName" auto-complete="off" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="managerGender">
          <el-tree :data="editForm.dataTree" :props="editForm.defaultProps" show-checkbox
                   node-key="id"
                   @check-change="treeHandleCheckChange"></el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {roleListShow,roleDel,roleEmpowerEcho,roleEmpowerModify,roleInsert,authorityList} from '../../api/personnelMG.js'
  import Pagination from '../../components/Pagination'
  import {getGenerateManagerAccountNumber, managerDel, managerList} from "../../api/personnelMG";
  export default {
    name: "roles",
    data(){
      return{
        nshow: true, //switch开启
        fshow: false, //switch关闭
        loading: false, //是显示加载
        editFormVisible: false, //控制编辑页面显示与隐藏
        title: '添加',
        //添加编辑面板的数据
        editForm:{
          roleName:'',
          dataTree:[{
            label: '一级 1',
            id:'123',
            children: [{
              label: '二级 1-1',
              id:'123',
              children: [{
                label: '三级 1-1-1',
                id:'123'
              }]
            }]
          }, {
            label: '一级 2',
            children: [{
              label: '二级 2-1',
              children: [{
                label: '三级 2-1-1'
              }]
            }, {
              label: '二级 2-2',
              children: [{
                label: '三级 2-2-1'
              }]
            }]
          }, {
            label: '一级 3',
            children: [{
              label: '二级 3-1',
              children: [{
                label: '三级 3-1-1',
                id:'123'
              }]
            }, {
              label: '二级 3-2',
              children: [{
                label: '三级 3-2-1'
              }]
            }]
          }],
          defaultProps: {
            id: 'id',
            children: 'children',
            label: 'label'
          }
        },
        //表单验证
        rules:{

        },
        //搜索加分页参数
        formInline:{
          page: 1,
          limit: 10,
          roleName: '',
          token: localStorage.getItem('logintoken')
        },
        //表单显示数据源
        listData:[
          {
            roleNumber:'',
            roleName: '',
            insertTime:'',
            modifiedTime:'',
          }
        ],
        //多选框
        multipleSelection:[],
        // 分页参数
        pageparm: {
          currentPage: 0,
          pageSize: 10,
          total: 0
        }
      }
    },
    //注册分页组件
    components:{
      Pagination
    },
    created() {
      this.getData(this.formInline);
    },
    methods:{
      treeHandleCheckChange(data, checked, indeterminate) {
        alert(JSON.stringify(data))
        // alert(checked)
        // alert(indeterminate)
      },
      //用于显示序号
      indexMethod(index){
        let curpage = this.pageparm.currentPage; //单前页码，具体看组件取值
        let limitpage = this.pageparm.pageSize; //每页条数，具体是组件取值
        return index + 1 + (curpage - 1) * limitpage;
      },

      // 获取角色列表
      getData(params) {
        this.loading = true
        roleListShow(params).then(res => {
          this.loading = false
          //this.listData = res.data
          this.listData = res.data.records
          this.pageparm.currentPage = res.data.current
          this.pageparm.pageSize = res.data.size
          this.pageparm.total = res.data.total
          this.formInline.page = res.data.current
          this.formInline.limit = res.data.size
        })
      },
      //删除
      dataDel(row){
        let rows=[];
        rows.push(row)
        //alert(JSON.stringify(rows))
        this.$confirm('确定要删除吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          let managerAccountNumbers=[]
          rows.forEach(manager=>{
            managerAccountNumbers.push(manager.managerAccountNumber)
          })
          let param={"dataList":managerAccountNumbers}
          roleDel(param).then(res=>{
            if(res.code==200){
              this.$message({
                type: 'success',
                message: '删除成功'
              })
            }else{
              let roleNumbers=res.data
              this.$message({
                type: 'error',
                message: '删除失败，未删除的:'+JSON.stringify(roleNumbers)
              })
            }
            this.getData(this.formInline)
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      //获取权限下拉列表
      getAuthorityList(){
        authorityList().then((res)=>{
          alert(JSON.stringify(res))
        })
      },
      // 分页插件事件
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize
        this.getData(this.formInline)
      },
      // 搜索事件
      search() {
        this.getData(this.formInline)
      },
      //显示编辑界面
      handleEdit: function(index,row) {
        this.getAuthorityList()
        this.editFormVisible = true
        if (row != undefined && row != 'undefined') {

          this.title = '修改'
          this.editForm.managerAccountNumber= ''
          this.editForm.managerName= ''
          this.editForm.roleNumber= ''
          this.editForm.managerGender= ''

        } else {

          this.title = '添加'
          this.editForm.managerAccountNumber= ''
          this.editForm.managerName= ''
          this.editForm.moleNumber= ''
          this.editForm.managerGender= ''
        }
      },
      // 关闭编辑、增加弹出框
      closeDialog() {
        this.editFormVisible = false
      }
    }

  }
</script>

<style scoped>

</style>
